<template>
    <div class="w-50 mx-auto shadow border-1 border mt-3">
        <div>
            <ul :class="['list-group']">
                <li :class="['list-group-item', 'libg']" v-for="topic in list" :key="topic.id">
                    {{ topic.title }}
                </li>
            </ul>
        </div>
        <button v-for="page in pages" :key="page.id" :class="[{ 'bg': page.status }, 'page', 'btn', 'mx-2', 'col-2']"
            @click="toPage(page.id)">
            <img :src="page.img" class="card-img-top">
            <div class="card-body">
                <p class="card-text">{{ page.label }}</p>
            </div> 
        </button>
    </div>
</template>

<script setup>
import { watchEffect, ref } from 'vue';
import { getTopicsByParams } from './axios';
const pages = ref([
    {
        id: 1,
        label: '购物车',
        img: require('@/assets/img/buy.png'),
        status: false
    },
    {
        id: 2,
        label: '收藏',
        img: require('@/assets/img/star.png'),
        status: false
    },
    {
        id: 3,
        label: '首页',
        img: require('@/assets/img/firstPage.png'),
        status: false
    },
    {
        id: 4,
        label: '设置',
        img: require('@/assets/img/set.png'),
        status: false
    },
    {
        id: 5,
        label: '我的',
        img: require('@/assets/img/my.png'),
        status: false
    },

]);

const currentPage = ref(1);

const list = ref([]);

const toPage = id => {
    currentPage.value = id;
}

watchEffect(() => {
    pages.value.forEach(page => {
        if (page.id == currentPage.value) page.status = true;
        else page.status = false;
    });
    getTopicsByParams({ limit: 15, page: currentPage.value })
        .then(res => {
            list.value = res.data.data;
        })
});
</script>

<style lang="scss" scoped>
.bg {
    background-color: #0d3ed1;
    color: #811688;
}

.page {
    cursor: pointer;
    border-radius: 5px;
}

.libg {
    background-color: rgb(98, 35, 35);
}
</style>